<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电商详情页</title>
    <style>
        li {
            list-style: none;
        }
        
        ul {
            display: flex;
            border: 1px red solid;
            justify-content: space-evenly;
            padding: 10px 0;
        }
        
        ul li {
            width: 24%;
            border: 1px solid #ccc;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px 0;
            cursor: pointer;
        }
        
        ul li img {
            width: 90%;
        }
        
        ul li p {
            width: 90%;
            margin: 5px;
            color: red;
        }
    </style>

</head>

<body>
    <ul id="con">
        <!-- <li class="con1"><img src="./images/11por.jpg" alt=""></li>
        <p>价格：￥9999.00</p>
        <p>Apple iPhone 11 Pro (A2217) 256GB 银色 移动联通电信4G手机 双卡双待</p>
        <p>31万+条评价</p>
        <span>Apple产品官方自营</span> -->
    </ul>
</body>
<script>
    // 创建对象数组
    var con1 = [{
            id: 1,
            url: './images/11por.jpg',
            name: 'Apple iPhone 11 Pro (A2217) 256GB 移动联通电信4G手机 双卡双待',
            price: 9999.00,
            evaluate: 31,
            color: '暗绿',
            dizi: 'Apple产品官方自营'


        }, {
            id: 2,
            url: './images/11.jpg',
            name: 'Apple iPhone 11  (A2217) 256GB  移动联通电信4G手机 双卡双待',
            price: 5999.00,
            evaluate: 210,
            color: '绿色',
            dizi: 'Apple产品官方自营'
        }, {
            id: 3,
            url: './images/8p.jpg',
            name: 'Apple iPhone 8 puls (A2217) 128GB  移动联通电信4G手机 双卡双待',
            price: 4999.00,
            evaluate: 100,
            color: '黑色',
            dizi: 'Apple产品官方自营'
        }, {
            id: 4,
            url: './images/xs.jpg',
            name: 'Apple iPhone xs mxs (A2217) 256GB 移动联通电信4G手机 双卡双待',
            price: 4999.00,
            evaluate: 80,
            color: '白色',
            dizi: 'Apple产品官方自营'
        }]
        // 循环遍历数组，然后渲染到页面中
    con1.forEach(function(item, index) {
            con.innerHTML += '<li idx="' + item.id + '" class="con2"><img src="' + item.url + '">' +
                '<span>型号：' + item.name + '</span>' +
                '<p>颜色:' + item.color + '</p>' +
                '<p>价格:' + '￥' + item.price + '</p>' +
                '<p>评价:' + item.evaluate + '万' + '+' + '评价' + '</p>' +
                '<p>' + item.dizi + '</p>' +
                '</li>'

        })
        // 获取元素
    var list = document.getElementsByTagName('li');
    for (var i = 0; i < list.length; i++) {
        list[i].onclick = function() {
            // console.log(1);

            open('手机详情页.html?id=' + this.getAttribute('idx'));
        }
    }
</script>

</html>